<template>
  <!-- 我的收藏 -->
  <div class="box">
    <div class="zbc" v-if="zbc">
      <div class="shangjia" v-if="shangjiaShow">
        <p>确定要取消所选收藏吗？</p>
        <div class="d1" @click="guanShangjia">取消</div>
        <div class="d2" @click="quedingShangjia">确定</div>
      </div>
    </div>
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="18"></ceList>
      <div class="con">
        <div class="one-tab no-padding">
          <div class="one-tab-left">
            <div class="one-tab-item " :class="leibie == 1 ? 'active' : ''" @click="leibieClick(1)">
              房产
            </div>
            <div class="one-tab-item" :class="leibie == 2 ? 'active' : ''" @click="leibieClick(2)">
              车主
            </div>
            <div class="one-tab-item" :class="leibie == 4 ? 'active' : ''" @click="leibieClick(4)">
              招聘
            </div>
            <div class="one-tab-item" :class="leibie == 3 ? 'active' : ''" @click="leibieClick(3)">
              帮友圈
            </div>
          </div>
          <div class="one-tab-right">
            <template v-if="checkboxShow">
              <div class="one-tab-right-btn" @click="shangjia">
                取消收藏
              </div>
              <div class="one-tab-right-btn" @click="binaji">
                完成
              </div>
            </template>
            <template v-else>
              <div class="one-tab-right-btn" @click="binaji">
                管理
              </div>
            </template>
          </div>
        </div>
        <!-- <div class="leibie">
          <div class="anniu">
            <div :class="leibie == 1 ? 'xuan' : ''" @click="leibieClick(1)">
              房产
            </div>
            <div :class="leibie == 2 ? 'xuan' : ''" @click="leibieClick(2)">
              车主
            </div>
            <div :class="leibie == 3 ? 'xuan' : ''" @click="leibieClick(3)">
              帮友圈
            </div>
          </div>
          <div class="anniu_right">
            <span class="guanli" @click="binaji">{{
              checkboxShow ? "完成" : "管理"
            }}</span>
            <div class="qxsc" v-if="checkboxShow" @click="shangjia">
              取消收藏
            </div>
          </div>
        </div> -->

        <div v-if="leibie == 1">
          <div class="oneone-tab">
            <el-tabs v-model="activeName" ref="elTabs" @tab-click="handleClick">
              <el-tab-pane label="房源" name="first"></el-tab-pane>
              <el-tab-pane label="店铺" name="second"></el-tab-pane>
              <el-tab-pane label="用户" name="third"></el-tab-pane>
              <el-tab-pane label="楼盘" name="four"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="oneoneone-tab" v-show="subLeibie.length">
            <div v-for="(item, index) in subLeibie" :key="item.id"
              @click.stop="vehicleTabClick(1, vehicleTabData2, index + 1)" class="tab-item"
              :class="vehicleTabData3 == index + 1 ? 'active' : ''">
              {{ item.label }}
            </div>
          </div>
          <!-- <div class="vehicleTab level2-father" style="height:64px;">
            <div
              @click="vehicleTabClick(1, 1)"
              class="vehicleTabClass level2"
              :class="vehicleTabData2 == 1 ? 'vehicleTab_active' : ''"
            >
              房源
            </div>
            <div
              @click="vehicleTabClick(1, 2)"
              class="vehicleTabClass"
              :class="vehicleTabData2 == 2 ? 'vehicleTab_active' : ''"
            >
              店铺
            </div>
            <div
              @click="vehicleTabClick(1, 3)"
              class="vehicleTabClass"
              :class="vehicleTabData2 == 3 ? 'vehicleTab_active' : ''"
            >
              用户
            </div>
            <div
              @click="vehicleTabClick(1, 5)"
              class="vehicleTabClass"
              :class="vehicleTabData2 == 5 ? 'vehicleTab_active' : ''"
            >
              楼盘
            </div>
          </div>
          <div
            class="vehicleTab level3-father"
            v-if="subLeibie.length > 0"
            style="height:64px;"
          >
            <div
              v-for="(item, index) in subLeibie"
              :key="item.id"
              @click.stop="vehicleTabClick(1, vehicleTabData2, index + 1)"
              class="vehicleTabClass level3"
              :class="vehicleTabData3 == index + 1 ? 'vehicleTab_active' : ''"
            >
              {{ item.label }}
            </div>
          </div> -->

          <div class="list" v-if="vehicleTabData2 == 1">
            <div class="li" style="display: flex" v-for="(item, index) in collectList" :key="index"
              v-if="collectTotal > 0">
              <template v-if="checkboxShow">
                <div class="box-check">
                  <el-checkbox :value="item.choose" @change="choosehouse(item.id)"></el-checkbox>
                </div>
              </template>
              <div style="position: relative;">
                <img class="img" @click="details(item)" style="object-fit: contain; background-color: #00000033" :src="item.display_diagram
                  ? item.display_diagram
                  : $img + item.houseImageDiv
                  " />
                <img class="shangb" src="../../../assets/haveDeleted.png" v-if="item.delFlag == 1" />
                <img class="shangb" src="../../../assets/beenSold.png"
                  v-else-if="item.status == 1 && item.transactionType == 2" />
                <img class="shangb" src="../../../assets/beenLease.png"
                  v-else-if="item.status == 1 && item.transactionType == 1" />
                <img class="shangb" src="../../../assets/grounding.png"
                  v-else-if="item.status == 0 && item.upStatus == 1" />
                <img class="shangb" src="../../../assets/removeShelves.png" v-else-if="item.upStatus == 0" />
              </div>

              <div class="wenzi">
                <p class="p1" style="cursor: pointer" @click="details(item)">
                  <tag-view :item="item"></tag-view>{{ item.title }}
                </p>
                <p class="p2 line1" @click="details(item)">
                  {{ item.region }} {{ item.address }}
                </p>
                <p class="p3" @click="details(item)">
                  <span>{{ item.houseType }}</span>
                  <span>{{ item.area }}m²</span>
                  <span>{{ item.foors }}</span>
                </p>
                <p class="p4">
                  <img @click="goHouseAgentDetails(item)" v-if="item.image != null" :src="item.image" />
                  <img @click="goHouseAgentDetails(item)" v-else
                    src="https://pic.bangbangtongcheng.com/static/my/header.png" />
                  <span @click="goHouseAgentDetails(item)" style="margin-left: 7px">{{ item.nikeName || "未命名用户" }}</span>
                  <span class="gong" @click="goHouseShopDetails(item)">{{
                    item.shopName
                  }}</span>
                </p>
              </div>
              <div class="jiage">
                <p class="p1" v-if="item.transactionType == 1">
                  {{ item.price }}元
                </p>
                <p class="p1" v-if="item.transactionType == 2">
                  {{ item.price }}万
                </p>
                <p class="p2" v-if="item.transactionType == 2">
                  {{ ((item.price * 10000) / item.area).toFixed(2) }}元/m²
                </p>
              </div>
            </div>
            <div v-if="collectTotal == 0" style="width: 100%; height: 400px">
              <el-empty description="还没有收藏过房源"></el-empty>
            </div>
          </div>
          <div class="list ll2" v-if="vehicleTabData2 == 2">
            <div class="li" style="display: flex" v-for="(item, index) in collectList" :key="index"
              v-if="collectTotal > 0">
              <template v-if="checkboxShow">
                <div v-if="!item.choose" style="
                    font-size: 50px;
                    line-height: 154px;
                    color: #d1d1d1;
                    margin-right: 10px;
                    cursor: pointer;
                  " @click="choosehouse(item.id)">
                  ○
                </div>
                <p v-else class="el-icon-success" style="
                    font-size: 30px;
                    line-height: 154px;
                    color: #64b6a8;
                    margin-right: 10px;
                    cursor: pointer;
                  " @click="choosehouse(item.id)"></p>
              </template>
              <div style="position: relative;">
                <img class="img" :src="$img + item.image"
                  style="object-fit: contain;cursor: pointer;background-color: rgb(209 204 204 / 20%);"
                  @click="details(item)" />

                <img class="shangb" src="../../../assets/zai.png" v-show="item.isOpen == 1" />
                <img class="shangb" src="../../../assets/wei.png" v-show="item.isOpen == 0" />
              </div>

              <div class="wenzi" style="cursor: pointer;" @click="details(item)">
                <p class="p1">{{ item.shopName }}</p>
                <p class="p2">地址：{{ item.shopAddress }}</p>
                <p class="p5">
                  <span style="color:red;font-size:22px;margin-right: 21px;">{{ item.houseNum }}套</span>
                  <span style="font-size:14px;">在售/在租</span>
                </p>
              </div>
            </div>
            <div v-if="collectTotal == 0" style="width: 100%; height: 400px">
              <el-empty description="还没有收藏过店铺"></el-empty>
            </div>
          </div>
          <div class="list1" v-if="vehicleTabData2 == 3">
            <div class=" li" :style="index % 3 == 2 ? 'margin-right:0px' : 'margin-right:43px'"
              v-for="(item, index) in collectList" :key="index" v-if="collectTotal > 0">
              <div class=""
                style="box-sizing: border-box;border: 1px solid #d0d0d0;display:flex;position:relative;padding-bottom: 10px;">
                <template v-if="checkboxShow">
                  <div class="box-check" style="position:absolute;top:20px;">
                    <el-checkbox :value="item.choose" @change="choosehouse(item.id)"></el-checkbox>
                  </div>
                </template>
                <div>
                  <img @click="goHouseAgentDetails(item)" class="touxiang" :src="item.image ||
                    'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " style="object-fit: contain; " />
                  <div class="identity">
                    <div @click.stop="goHouseAgentDetails(item)" class="line1"
                      style="cursor: pointer;width:100px;text-align:center;">
                      {{ item.nikeName || "未命名用户" }}
                    </div>
                    <div class="jjr">
                      {{ item.isAgent == 1 ? "经纪人" : "个人用户" }}
                    </div>
                  </div>
                  <div class="pingfen">
                    <div>评分</div>
                    <img v-for="(item1, index) in Number(item.score || 0)" :key="'01' + index"
                      src="../../../assets/xin_liang.png" />
                    <img v-for="(item1, index) in 5 - (item.score || 0)" :key="'00' + index"
                      src="../../../assets/xin_hui.png" />
                  </div>
                  <div class="weigui">
                    <div class="wei" @click.stop="weiguiClick(item)">
                      <span>违规次数</span>
                      <span>></span>
                      <span style=" width: 18px;display: inline-block; color: red; font-weight: 600; font-size: 20px">{{
                        item.reportCount || 0 }}</span>
                    </div>
                    <img style="margin-left: 20px" @click="chat(item.id)" src="../../../assets/xiaoxi_lan.png" />
                    <el-tooltip class="item" effect="dark" :content="item.phone" placement="top-start">
                      <img src="../../../assets/dianhua_lan.png" />
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="collectTotal == 0" style="width: 100%; height: 400px">
              <el-empty description="还没有收藏过用户"></el-empty>
            </div>
          </div>
          <div class="list ll" v-if="vehicleTabData2 == 5">
            <div class="li" style="display:flex;" v-for="(item, index) in collectList" :key="index">
              <template v-if="checkboxShow">
                <div v-if="!item.choose" style="
                    font-size: 50px;
                    line-height: 154px;
                    color: #d1d1d1;
                    margin-right: 10px;
                    cursor: pointer;
                  " @click="choosehouse(item.id)">
                  ○
                </div>
                <p v-else class="el-icon-success" style="
                    font-size: 30px;
                    line-height: 154px;
                    color: #64b6a8;
                    margin-right: 10px;
                    cursor: pointer;
                  " @click="choosehouse(item.id)"></p>
              </template>
              <div style="position: relative;">
                <img class="biao" style="
              object-fit: contain;
              cursor: pointer;
              background-color: rgb(209 204 204 / 20%);
            " @click="details(item)" :src="item.showImg" />
                <img class="shangb" src="../../../assets/zai.png" v-show="item.isOpen == 1" />
                <img class="shangb" src="../../../assets/wei.png" v-show="item.isOpen == 0" />
              </div>

              <div class="name">
                <div class="t_1" @click="details(item)">{{ item.title }}</div>
                <div class="t_2">
                  <span style="margin-right: 5px">{{ item.region }}</span>
                  <span>{{ item.address }}</span>
                </div>
                <div class="t_4">
                  <!-- <img src="../../assets/touxiang.png" />
              <span>叶梦梵</span>-->
                  <!-- <div @click="shopdetails(item.shopId)">{{item.shopName}}</div> -->
                </div>
              </div>
              <div class="qian">
                <p class="p1">
                  <span>均价</span>
                  <span style="font-size: 22px; color: red">{{
                    item.averagePrice
                  }}</span>
                  <span v-if="!isNaN(item.averagePrice)">元/㎡</span>
                </p>
              </div>
            </div>
            <div v-if="collectTotal == 0" style="width: 100%; height: 400px">
              <el-empty description="还没有收藏过楼盘"></el-empty>
            </div>
          </div>
          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="collectTotal" :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize" @current-change="CollectCurrentChange"></el-pagination>
          </div>
          <div class="caozuo" v-if="checkboxShow">
            <el-checkbox v-model="select" @change="selectColl">{{
              select ? "取消全选" : "全选"
            }}</el-checkbox>
          </div>
        </div>
        <div v-if="leibie == 2">
          <div class="oneone-tab">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="车源" name="first"></el-tab-pane>
              <el-tab-pane label="店铺" name="second"></el-tab-pane>
              <el-tab-pane label="服务项目" name="third"></el-tab-pane>
              <el-tab-pane label="用户" name="four"></el-tab-pane>
            </el-tabs>
          </div>
          <div class="oneoneone-tab" v-show="subLeibie.length">
            <div v-for="(item, index) in subLeibie" :key="item.id"
              @click.stop="vehicleTabClick(2, vehicleTabData2, index + 1)" class="tab-item"
              :class="vehicleTabData3 == index + 1 ? 'active' : ''">
              {{ item.label }}
            </div>
          </div>
          <!-- <div class="vehicleTab level2-father" style="height:64px">
            <div
              @click="vehicleTabClick(2, 1)"
              class="vehicleTabClass level2"
              :class="vehicleTabData2 == 1 ? 'vehicleTab_active' : ''"
            >
              车源
            </div>
            <div
              @click="vehicleTabClick(2, 2)"
              class="vehicleTabClass level2"
              :class="vehicleTabData2 == 2 ? 'vehicleTab_active' : ''"
            >
              店铺
            </div>
            <div
              @click="vehicleTabClick(2, 3)"
              class="vehicleTabClass level2"
              :class="vehicleTabData2 == 3 ? 'vehicleTab_active' : ''"
            >
              服务项目
            </div>
            <div
              @click="vehicleTabClick(2, 4)"
              class="vehicleTabClass level2"
              :class="vehicleTabData2 == 4 ? 'vehicleTab_active' : ''"
            >
              用户
            </div>
          </div>
          <div
            class="vehicleTab level3-father"
            v-if="subLeibie.length > 0"
            style="height:64px;"
          >
            <div
              v-for="(item, index) in subLeibie"
              :key="item.id"
              @click.stop="vehicleTabClick(2, vehicleTabData2, index + 1)"
              class="vehicleTabClass level3"
              :class="vehicleTabData3 == index + 1 ? 'vehicleTab_active' : ''"
            >
              {{ item.label }}
            </div>
          </div> -->
          <div class="cheClass " style="display: flex; cursor: pointer" v-for="(item, index) in collectList" :key="index"
            v-if="collectTotal > 0 && (vehicleTabData2 == 1 || vehicleTabData2 == 2)
              ">
            <template v-if="checkboxShow">
              <div class="box-check">
                <el-checkbox :value="item.choose" @change="choosehouse(item.id)"></el-checkbox>
              </div>
            </template>
            <div style="position:relative;">
              <img v-if="vehicleTabData2 == 1" style="object-fit: contain; width: 230px; height: 154px" :src="item.vehicleCoverPicture
                ? item.vehicleCoverPicture
                : item.storeCoverImage
                " />
              <template v-if="vehicleTabData2 == 1">
                <img class="shangb" src="../../../assets/haveDeleted.png" v-if="item.deleteFlag == 1" />
                <img class="shangb" src="../../../assets/beenSold.png" v-else-if="item.saleStatus == 1" />

                <img class="shangb" src="../../../assets/grounding.png" v-else-if="item.shelfStatus == 1" />
                <img class="shangb" src="../../../assets/removeShelves.png" v-else-if="item.shelfStatus == 0" />
              </template>
              <img v-if="vehicleTabData2 == 2" style="object-fit: contain; width: 230px; height: 154px" :src="item.storeCoverImage
                ? item.storeCoverImage
                : item.storeCoverImage
                " />
            </div>
            <div class="li_right">
              <div class="nameList" @click="details(item)">
                <div v-if="vehicleTabData2 == 1 && item.vehicleBrandModel" class="t_1">
                  <tag-view :item="item"></tag-view>{{
                    item.vehicleBrandModel
                    ? (item.vehicleBrandModel.split("|")[0] || "") +
                    " " +
                    (item.vehicleBrandModel.split("|")[1] || "")
                    : ""
                  }}
                  {{ item.model ? item.model + "/" : "" }}
                  {{
                    item.bodyStructureDoors +
                    "门" +
                    item.bodyStructureSeat +
                    "座" +
                    item.bodyStructureVehicle +
                    "车"
                  }}
                </div>
                <div v-if="vehicleTabData2 == 1" class="t_2">
                  <span>{{
                    item.mileage
                    ? +item.mileage >= 10000
                      ? +(item.mileage / 10000).toFixed(1) + "万公里/"
                      : item.mileage + "公里/"
                    : ""
                  }}{{
  item.licensingTimeYear
  ? item.licensingTimeYear + "年"
  : ""
}}</span>
                </div>
                <div v-if="vehicleTabData2 == 1" class="t_4">
                  <img class="t_4_img" style="border-radius: 31px" :src="item.userImage || (item.userInformation && item.userInformation.image) || 'https://pic.bangbangtongcheng.com/static/my/header.png'" />
                  <span style="cursor: pointer" @click="goVehicleAgentDetails(item)">{{
                    item.userInformation
                    ? item.userInformation.nikeName || "未命名用户"
                    : "未命名用户"
                  }}</span>
                  <div style="cursor: pointer" @click="goVehicleShopDetails(item)">
                    {{
                      item.distributor ? item.distributor.storeName : "个人车源"
                    }}
                  </div>
                </div>
                <div v-if="vehicleTabData2 == 2" class="t_1">
                  {{ item.storeName }}
                </div>
                <div v-if="vehicleTabData2 == 2" class="t_2">
                  {{ item.officeAddress }}
                </div>
                <div v-if="vehicleTabData2 == 2" class="t_4" style="height:80px;"></div>
              </div>
              <div class="li_right_price" v-if="vehicleTabData2 == 1">
                {{
                  item.intervalPrice && item.intervalPrice != ""
                  ? item.intervalPrice.indexOf("-") > -1
                    ? item.intervalPrice.split("-")[0] +
                    "万-" +
                    item.intervalPrice.split("-")[1] +
                    "万"
                    : ""
                  : item.price + "万"
                }}
              </div>
            </div>
          </div>
          <div class="list ll2" v-if="vehicleTabData2 == 3">
            <div class="li" style="display: flex" v-for="(item, index) in collectList" :key="index"
              v-if="collectTotal > 0">
              <template v-if="checkboxShow">
                <div v-if="!item.choose" style="
                    font-size: 50px;
                    line-height: 154px;
                    color: #d1d1d1;
                    margin-right: 10px;
                    cursor: pointer;
                  " @click="choosehouse(item.id)">
                  ○
                </div>
                <p v-else class="el-icon-success" style="
                    font-size: 30px;
                    line-height: 154px;
                    color: #64b6a8;
                    margin-right: 10px;
                    cursor: pointer;
                  " @click="choosehouse(item.id)"></p>
              </template>
              <div style="position: relative;">
                <img class="img" :src="item.coverPhoto"
                  style="object-fit: contain;cursor: pointer;background-color: rgb(209 204 204 / 20%);"
                  @click="details(item)" />

                <img class="shangb" src="../../../assets/zai.png" v-show="item.isOpen == 1" />
                <img class="shangb" src="../../../assets/wei.png" v-show="item.isOpen == 0" />
              </div>

              <div class="fwxm">
                <div class="t_1" style="cursor: pointer" @click="details(item)">
                  {{ item.entryName }}
                </div>
                <div class="t_2 " style="cursor: pointer" @click="details(item)">
                  <span style="margin-right: 5px" class="line7">{{
                    item.entryDescription
                  }}</span>
                </div>
              </div>
            </div>
            <div v-if="collectTotal == 0" style="width: 100%; height: 400px">
              <el-empty description="还没有收藏过服务项目"></el-empty>
            </div>
          </div>
          <div class="list1">
            <div class="li" :style="index % 3 == 0 ? '' : 'margin-left:22px'" v-for="(item, index) in collectList"
              :key="index" v-if="collectTotal > 0 && vehicleTabData2 == 4">
              <div class=""
                style="box-sizing: border-box;border: 1px solid #d0d0d0;display:flex;position:relative;padding-bottom: 10px;">
                <template v-if="checkboxShow">
                  <div class="box-check" style="position:absolute;top:20px;">
                    <el-checkbox :value="item.choose" @change="choosehouse(item.id)"></el-checkbox>
                  </div>
                </template>
                <div>
                  <img @click="goVehicleAgentDetails(item)" class="touxiang" :src="item.image ||
                    'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " style="object-fit: contain; " />
                  <div class="identity">
                    <div @click="goVehicleAgentDetails(item)" class="line1"
                      style="cursor: pointer;width:100px;text-align:center;">
                      {{ item.nikeName || "未命名用户" }}
                    </div>
                    <div class="jjr">
                      {{ item.isAgent == 1 ? "经纪人" : "个人用户" }}
                    </div>
                  </div>
                  <div class="pingfen">
                    <div>评分</div>
                    <img v-for="(item1, index) in Number(item.score || 0)" :key="'01' + index"
                      src="../../../assets/xin_liang.png" />
                    <img v-for="(item1, index) in 5 - (item.score || 0)" :key="'00' + index"
                      src="../../../assets/xin_hui.png" />
                  </div>
                  <div class="weigui">
                    <div class="wei" @click.stop="weiguiClick(item)">
                      <span>违规次数</span>
                      <span>></span>
                      <span style="width: 18px;display: inline-block;  color: red; font-weight: 600; font-size: 20px">{{
                        item.reportCount || 0 }}</span>
                    </div>
                    <img style="margin-left: 20px" @click="chat(item.id)" src="../../../assets/xiaoxi_lan.png" />
                    <el-tooltip class="item" effect="dark" :content="item.phone" placement="top-start">
                      <img src="../../../assets/dianhua_lan.png" />
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </div>
          </div>


          <div v-if="collectTotal == 0 && vehicleTabData2 != 3" style="height: 450px">
            <el-empty :description="vehicleTabData2 == 1
              ? '还没有收藏车辆'
              : vehicleTabData2 == 2
                ? '还没有收藏店铺'
                : vehicleTabData2 == 4
                  ? '还没有收藏经纪人'
                  : '还没有收藏车系'
              "></el-empty>
          </div>

          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="collectTotal" :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize" @current-change="CollectCurrentChange"></el-pagination>
          </div>
          <div class="caozuo" v-if="checkboxShow">
            <el-checkbox v-model="select" @change="selectColl">{{
              select ? "取消全选" : "全选"
            }}</el-checkbox>
          </div>
        </div>
        <div v-if="leibie == 3">
          <div class="bangyq" v-for="item in collectList" :key="item.id">
            <template v-if="checkboxShow">
              <div class="box-check" style="margin-right:0;padding-left:24px;">
                <el-checkbox :value="item.choose" @change="choosehouse(item.id)"></el-checkbox>
              </div>
            </template>

            <friend-item :wrapWidth="860" :item="item" types="3" @reData="getMoreData" :forbidClick="true"
              style="padding-left:0"></friend-item>
          </div>

          <div style="height: 450px" v-if="collectTotal == 0">
            <el-empty description="还没有收藏的帮友圈"></el-empty>
          </div>

          <div class="fenye">
            <el-pagination background layout="prev, pager, next" :total="collectTotal" :current-page="collectPage.pageNo"
              :page-size="collectPage.pageSize" @current-change="CollectCurrentChange"></el-pagination>
          </div>
          <div class="caozuo" v-if="checkboxShow">
            <el-checkbox v-model="select" @change="selectColl">{{
              select ? "取消全选" : "全选"
            }}</el-checkbox>
          </div>
        </div>
        <div v-if="leibie == 4">
          <div class="oneone-tab">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="职位" name="first"></el-tab-pane>
              <el-tab-pane label="简历" name="second"></el-tab-pane>
              <el-tab-pane label="公司" name="third"></el-tab-pane>

            </el-tabs>
          </div>
          <!-- 招聘 -->
          <div class="list ll2" style="padding:0 0; margin-top: 0;">
            <div class="li" style="display: flex;margin-bottom:0;border-bottom:0px;padding:0 40px;"
              v-for="(item, index) in collectList" :key="index">
              <div class="box-check invite" v-show="checkboxShow" style="line-height: 100px;">
                <el-checkbox :value="item.choose" @change="choosehouse(item.id)"></el-checkbox>
              </div>
              <invite-item :key="index" :item="item" from="view" line v-if="vehicleTabData2 == 1"></invite-item>
              <recommended :key="index" :item="item" from="view" v-if="vehicleTabData2 == 2"></recommended>
              <template v-if="vehicleTabData2 == 3">
                <div class="company-item" @click.stop="goCompany(item)"
                  style="padding:16px 0; border-bottom: 1px solid #dcdcdc;width: 100%;display: flex;font-size: 16px;line-height: 24px;">
                  <div class="company-left"></div>
                  <div class="company-right" style="display: flex;flex-direction: column;justify-content: space-between;">
                    <div class="company-title" style="padding: 0 0;font-size: 18px;font-weight: 600;">{{
                      item.enterpriseName }}</div>
                    <div class="company-large" style="padding: 0 0;margin-bottom: 16x;">{{ item.guimo || '' }}
                    </div>
                    <div class="company-add line3" style="padding: 0 0;max-height: 72px;margin-top: 24px;opacity: 0.8;">{{
                      item.officeAddress }}
                    </div>
                  </div>

                </div>
              </template>
            </div>
            <div v-if="collectTotal == 0" style="width: 100%; height: 400px">
              <el-empty :description="vehicleTabData2 == 2 ? '还没有收藏过简历' : vehicleTabData2 == 1 ? '还没有收藏过职位' : '还没有收藏过公司'
                "></el-empty>
            </div>
            <div class="fenye">
              <el-pagination background layout="prev, pager, next" :total="collectTotal"
                :current-page="collectPage.pageNo" :page-size="collectPage.pageSize"
                @current-change="CollectCurrentChange"></el-pagination>
            </div>
            <div class="caozuo" v-if="checkboxShow">
              <el-checkbox v-model="select" @change="selectColl">{{
                select ? "取消全选" : "全选"
              }}</el-checkbox>
            </div>
          </div>
        </div>
      </div>
    </div>
    <floor></floor>
    <inform ref="inform" :bUserId="bUserId" :businessType="businessType"></inform>
    <chat ref="chats"></chat>
  </div>
</template>
<script>
import floor from "../../../components/floor";
import heads from "../../../components/head";
import ceList from "../../../components/ceList.vue";
import titlesearch from "../../../components/titlesearch.vue";
import chat from "../../../components/chat.vue";
import friendItem from "../../index/comp/bbcz-friend-circle-item.vue";
import inform from "../../index/inform.vue";
import inviteItem from "@/views/invite/comp/item.vue";
import recommended from "@/views/invite/comp/recommended.vue";
export default {
  components: {
    floor,
    heads,
    ceList,
    titlesearch,
    chat,
    friendItem,
    inform,
    inviteItem,
    recommended
  },
  watch: {
    activeName: {
      handler(newV, oldV) {
        if (this.adjust) {
          return
        }
        if (newV && this.leibie == 1) {
          var num;
          if (newV == "first") {
            num = 1;
          } else if (newV == "second") {
            num = 2;
          } else if (newV == "third") {
            num = 3;
          } else if (newV == "four") {
            num = 5;
          }

          this.vehicleTabClick(this.leibie, num);
        }
        if (newV && this.leibie == 2) {
          var num;
          if (newV == "first") {
            num = 1;
          } else if (newV == "second") {
            num = 2;
          } else if (newV == "third") {
            num = 3;
          } else if (newV == "four") {
            num = 4;
          }
          this.vehicleTabClick(this.leibie, num);
        }
        if (newV && this.leibie == 4) {
          var num;
          if (newV == "first") {
            num = 1;
          } else if (newV == "second") {
            num = 2;
          } else if (newV == "third") {
            num = 3;
          }
          this.vehicleTabClick(this.leibie, num);
        }
        setTimeout(() => {
          if (this.$refs.elTabs && this.$refs.elTabs.$children[0]) {
            var el = this.$refs.elTabs.$children[0].$children[0];
            var transformLeft = /(\d+)/g.exec(el.barStyle.transform)[1];
            var width = /(\d+)/g.exec(el.barStyle.width)[1];
            this.tagNumTop = +transformLeft + +width;
            console.log("transformLefttransformLeft", this.tagNumTop);
            // el.width
          }
        });
      },
      immediate: true
    }
  },
  data() {
    return {
      tagNumTop: 0,
      activeName: "first",
      bUserId: "",
      businessType: "",
      zbc: false,
      shouyeShow: false,
      shangjiaShow: false,
      xuan: 4,
      leibie: 1,
      radioCities: "",
      checkboxShow: false,
      user: {},
      collectPage: {
        pageSize: 3,
        pageNo: 1,
        userId: "",
        type: 1,
        cbType: 1
      },
      collectPageCZ: {
        pageSize: 3,
        pageNo: 1,
        userId: ""
      },
      collectList: [],
      collectTotal: 0,
      select: false,
      vehicleTabData: 1,
      ceshiArr: [],
      subLeibie: [],
      vehicleTabData2: 1,
      vehicleTabData3: 1,
      vehicleType: "", //新车，旧车
      storeType: "", //4s店
      customerType: "", //车用户
      serviceItemType: ""
    };
  },
  created() {
    this.getUser();
    this.vehicleTabClick(1, 1);
  },
  methods: {
    goCompany(company) {
      this.openUrlb('/invite/company', {
        userId: company.userId
      })
    },
    // 违规次数
    weiguiClick(item) {
      // this.disa = true;
      this.bUserId = item.id;
      if (this.leibie == 1) {
        this.businessType = "";
      } else if (this.leibie == 2) {
        this.businessType = "2";
      }
      setTimeout(() => {
        this.$refs.inform.getReportMyRecord();
      }, 100);
    },
    // 收藏切换
    vehicleTabClick(i, subI, subJ) {
      console.log(i + "-->" + subI + "-->" + subJ);
      subJ = subJ || 1;
      subI = subI || 1;
      if (subI) {
        let that = this;
        this.checkboxShow = false;
        switch (i) {
          case 1: //房源
            if (subI == 1) {
              that.subLeibie = [
                { id: i + "00" + subI, label: "全部" },
                { id: i + "01" + subI, label: "新房" },
                { id: i + "02" + subI, label: "二手房" },
                { id: i + "03" + subI, label: "出租房" }
              ];
            } else if (subI == 2) {
              that.subLeibie = [];
            } else if (subI == 3) {
              that.subLeibie = [
                { id: i + "00" + subI, label: "全部" },
                { id: i + "01" + subI, label: "个人用户" },
                { id: i + "02" + subI, label: "经纪人" }
              ];
            } else {
              that.subLeibie = [];
            }
            break;
          case 2: //车主
            if (subI == 1) {
              //车源
              that.subLeibie = [
                { id: i + "00" + subI, label: "全部" },
                { id: i + "01" + subI, label: "到店新车" },
                { id: i + "02" + subI, label: "二手车" },
                { id: i + "03" + subI, label: "车系" }
              ];
              if (subJ == 1) {
                //全部
                this.vehicleType = "";
              } else if (subJ == 2) {
                //新车
                this.vehicleType = 1;
              } else if (subJ == 3) {
                //二手车
                this.vehicleType = 2;
              } else if (subJ == 4) {
                //车系
                this.vehicleType = 3;
              }
            } else if (subI == 2) {
              //店铺
              that.subLeibie = [
                { id: i + "00" + subI, label: "全部" },
                { id: i + "01" + subI, label: "4S店" },
                { id: i + "02" + subI, label: "汽贸店" },
                { id: "i+03" + subI, label: "美容装饰" },
                { id: "00" + i + subI, label: "维修保养" }
              ];
              if (subJ == 1) {
                //全部
                this.storeType = "";
              } else if (subJ == 2) {
                //4s店
                this.storeType = 1;
              } else if (subJ == 3) {
                //汽贸店
                this.storeType = 2;
              } else if (subJ == 4) {
                //美容装饰
                this.storeType = 3;
              } else if (subJ == 5) {
                //维修保养
                this.storeType = 4;
              }
            } else if (subI == 3) {
              //服务项目
              that.subLeibie = [
                { id: i + "00" + subI, label: "全部" },
                { id: i + "01" + subI, label: "美容装饰" },
                { id: i + "02" + subI, label: "维修保养" }
              ];
              if (subJ == 1) {
                //全部
                this.serviceItemType = "";
              } else if (subJ == 2) {
                //美容装饰
                this.serviceItemType = 1;
              } else if (subJ == 3) {
                //维修保养
                this.serviceItemType = 2;
              }
            } else if (subI == 4) {
              //用户
              that.subLeibie = [
                { id: i + "00" + subI, label: "全部" },
                { id: i + "01" + subI, label: "个人用户" },
                { id: i + "02" + subI, label: "经纪人" }
              ];
              if (subJ == 1) {
                //全部
                this.customerType = "";
              } else if (subJ == 2) {
                //个人用户
                this.customerType = 1;
              } else if (subJ == 3) {
                //经纪人
                this.customerType = 2;
              }
            }
            break;
          case 3: //帮友圈
            that.subLeibie = [];
            break;
          case 4: //招聘
            that.subLeibie = [
              { id: i + "00" + subI, label: "职位" },
              { id: i + "01" + subI, label: "简历" },
              { id: i + "02" + subI, label: "公司" }

            ];
            if (!(this.activeName == "first" || this.activeName == "second" || this.activeName == "third")) {
              this.activeName == "third";
            }
            console.log("开始招聘拉");
            break;
          default:
            console.log("不匹配");
        }
        this.collectPageCZ.pageNo = 1;
        this.collectPage.pageNo = 1;
        that.collectPage.cbType = subI;
        this.vehicleTabData3 = subJ ? subJ : 1;
        this.vehicleTabData2 = subI ? subI : 1;
        this.collectList = [];
        // console.log("22222222222222222222222");
        this.getMoreData();
        return;
      }
      this.collectList = [];
      this.select = false;
      this.vehicleTabData = i;
      this.getMoreData();
    },
    // getImgFile1(cab){
    // 	// 请求成功
    // 	// 执行回调
    // 	cab(res)
    // },
    // getIng1(){
    // 	this.getImgFile1((res)=>{
    // 		console.log('拿到的结果1',res)
    // 		// 处理1
    // 	})
    // },
    // getIng2(){
    // 	this.getImgFile1((res)=>{
    // 		console.log('拿到的结果2',res)
    // 		// 处理2
    // 	})
    // },
    // 获取帮友圈数据
    friendsCircle() {
      let arr = [{ id: 1 }, { id: 2 }];
      arr.forEach(v => {
        v.chage = 0;
      });
      this.ceshiArr = arr;
    },
    zhankaiClick(item) {
      this.ceshiArr.forEach(v => {
        if (v.id == item.id) {
          if (v.chage == 0) {
            v.chage = 1;
          } else {
            v.chage = 0;
          }
        }
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.collectPage.userId = user.id;
        this.collectPageCZ.userId = user.id;
        // this.getMoreData()
        // this.getUserCollection();
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000
        });
        this.$router.push("/");
      }
    },
    getMoreData() {
      //  vehicleTabData2:1,
      // vehicleTabData3:1,
      var param = {};
      var url;
      if (this.leibie == 1) {
        //房主
        if (this.vehicleTabData2 == 1) {
          var param = {};
          if (this.vehicleTabData3 == 1) {
            //全部
            param = {};
          } else if (this.vehicleTabData3 == 2) {
            //新房
            param = { newOld: 1, transactionType: 2 };
          } else if (this.vehicleTabData3 == 3) {
            //二手房
            param = { newOld: 2, transactionType: 2 };
          } else if (this.vehicleTabData3 == 4) {
            //出租房
            param = { transactionType: 1 };
          }
          this.getUserCollection(param);
        } else if (this.vehicleTabData2 == 2) {
          this.getUserCollection();
        } else if (this.vehicleTabData2 == 3) {
          if (this.vehicleTabData3 == 1) {
            this.getUserCollection({ pageSize: 6 });
          } else {
            this.getUserCollection({
              isAgent: this.vehicleTabData3 - 2,
              pageSize: 6
            });
          }
          this.collectPageCZ.pageSize = 6;
          this.collectPage.pageSize = 6;
        } else if (this.vehicleTabData2 == 5) {
          this.getUserCollection();
        }
      } else if (this.leibie == 2) {
        //车源
        // var collectPageCZ = this.
        if (this.vehicleTabData2 == 1) {
          // api/mobile/vehicleOwner/getMyVehicleCollectionAttention
          this.getMyVehicleCollectionAttention({
            ...this.collectPageCZ,
            vehicleType: this.vehicleType
          });
        } else if (this.vehicleTabData2 == 2) {
          this.getMyDistributorCollectionAttention({
            ...this.collectPageCZ,
            storeType: this.storeType
          });
        } else if (this.vehicleTabData2 == 3) {
          this.getMyFWCollectionAttention({
            ...this.collectPageCZ,
            serviceItemType: this.serviceItemType
          });
        } else if (this.vehicleTabData2 == 4) {
          this.getMyUserCollectionAttention({
            ...this.collectPageCZ,
            customerType: this.customerType,
            pageSize: 6
          });
          this.collectPageCZ.pageSize = 6;
          this.collectPage.pageSize = 6;
        }
      } else if (this.leibie == 3) {
        //帮有圈
        this.getMyHelpingFriendsCircleCollectionAttention({
          ...this.collectPageCZ,
          pageSize: 3
        });
        this.collectPageCZ.pageSize = 3;
        this.collectPage.pageSize = 3;
      } else if (this.leibie == 4) {
        //招聘

        console.log('this.vehicleTabData2', this.vehicleTabData2)
        if (this.vehicleTabData2 == 1) {
          //职位
          url = "/api/mobile/public/getMyRecruitFollowCollections";
        } else if (this.vehicleTabData2 == 2) {
          url = "/api/mobile/public/getMyResumeFollowCollections";
          // 简历
        } else {
          // 公司
          url = "/api/mobile/public/getMyEnterpriseFollowCollections";
        }
        this.getResumeCollectionList(
          {
            ...this.collectPageCZ,
            pageSize: 6,
            // businessType: 4
          },
          url
        );
        this.collectPageCZ.pageSize = 6;
        this.collectPage.pageSize = 6;
      }
    },
    // 获取简历收藏列表
    getResumeCollectionList(param, url) {
      this.$getHttp(url, param).then(data => {
        if (data.code == 200) {
          if (data.resumeFollowCollections) {
            data.resumeFollowCollections.pageList.forEach(item => {
              item.choose = false;
            });
            this.collectList = data.resumeFollowCollections.pageList;
            this.collectTotal = data.resumeFollowCollections.pageCount;
          }
          if (data.recruitFollowCollections) {
            data.recruitFollowCollections.pageList.forEach(item => {
              item.choose = false;
            });
            this.collectList = data.recruitFollowCollections.pageList;
            this.collectTotal = data.recruitFollowCollections.pageCount;
          }
          if (data.enterpriseFollowCollections) {
            data.enterpriseFollowCollections.pageList.forEach(item => {
              item.choose = false;
            });
            this.collectList = data.enterpriseFollowCollections.pageList;
            this.collectTotal = data.enterpriseFollowCollections.pageCount;
          }


        }
      });
    },
    // 車源
    getMyVehicleCollectionAttention(param) {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getMyVehicleCollectionAttention",
        param
      ).then(data => {
        if (data.code == 200) {
          data.vehicleCollectionAttentionList.pageList.forEach(item => {
            item.choose = false;
          });
          this.collectList = data.vehicleCollectionAttentionList.pageList;
          this.collectTotal = data.vehicleCollectionAttentionList.pageCount;
          console.log("collectListcollectList", this.collectList);
        }
      });
    },
    // 车店铺
    getMyDistributorCollectionAttention(param) {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getMyDistributorCollectionAttention",
        param
      ).then(data => {
        if (data.code == 200) {
          data.distributorCollectionAttentionList.pageList.forEach(item => {
            item.choose = false;
          });
          this.collectList = data.distributorCollectionAttentionList.pageList;
          this.collectTotal = data.distributorCollectionAttentionList.pageCount;
        }
      });
    },
    // 服务
    getMyFWCollectionAttention(param) {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getMyServiceItemsCollectionAttention",
        param
      ).then(data => {
        if (data.code == 200) {
          data.ServiceItemsCollectionAttentionList.pageList.forEach(item => {
            item.choose = false;
          });
          this.collectList = data.ServiceItemsCollectionAttentionList.pageList;
          this.collectTotal =
            data.ServiceItemsCollectionAttentionList.pageCount;
        }
      });
    },
    // 车用户
    getMyUserCollectionAttention(param) {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getMyUserCollectionAttention",
        param
      ).then(data => {
        if (data.code == 200) {
          data.userCollectionAttentionList.pageList.forEach(item => {
            item.choose = false;
          });

          this.collectList = data.userCollectionAttentionList.pageList;
          this.collectTotal = data.userCollectionAttentionList.pageCount;
        }
      });
    },
    // 车帮友圈
    getMyHelpingFriendsCircleCollectionAttention(param) {
      this.$getHttp(
        "/api/mobile/vehicleOwner/getMyHelpingFriendsCircleCollectionAttention",
        param
      ).then(data => {
        if (data.code == 200) {
          data.helpingFriendsCircleList.pageList.forEach(item => {
            item.choose = false;
            item.chage = 0;
            item.picture = this.manageImg(item.picture);
            item.imageList = this.manageImg(item.picture);
            item.video = this.manageImg(item.video);
          });
          this.collectList = data.helpingFriendsCircleList.pageList;
          this.collectTotal = data.helpingFriendsCircleList.pageCount;
        }
      });
    },

    // 房源
    getUserCollection(param = {}) {
      this.$getHttp("/mob/user/getUserCollection", {
        ...this.collectPage,
        ...param
      }).then(data => {
        if (data.code == 200) {
          if (this.vehicleTabData2 == 5) {
            //楼盘
            data.page.list.forEach(e => {
              e.choose = false;
              if (e.showImg) {
                e.showImg = this.$img + e.showImg.split("|")[0];
              }
            });

            this.collectList = data.page.list;
            this.collectTotal = data.page.count;
            return;
          }
          data.page.list.forEach(e => {
            e.choose = false;
            if (this.leibie == 1) {
              if (e.hasOwnProperty("floor")) {
                if (e.floor.indexOf("|") == -1) {
                  e.floor = "";
                } else {
                  e.floor =
                    e.floor.split("|")[0] +
                    "层/" +
                    "共" +
                    e.floor.split("|")[1] +
                    "层";
                }
              }
              if (!e.hasOwnProperty("shopName") || e.shopName == "") {
                e.shopName = "个人房源";
              }
            }
            if (this.leibie == 5) {
              e.image = e.showImg.split("|")[0];
            }
            if (this.leibie == 2) {
              e.image = e.image.split("|")[0];
            }
          });
          // console.log(data.page.list);
          this.collectList = data.page.list;
          this.collectTotal = data.page.count;
        }
      });
    },
    // 房店铺

    // collectCurrentChange(e) {console.log(e);},
    choosehouse(id) {
      console.log("111111111111111111111111111");
      var flag = true;
      this.collectList.forEach(e => {
        if (e.id == id) {
          e.choose = !e.choose;
        }
        if (!e.choose) {
          flag = false;
        }
      });
      this.select = flag;
    },

    selectColl(type) {
      console.log("typetypetypetype", type);
      this.collectList.forEach(e => {
        e.choose = type;
      });
    },
    kddetails(id) {
      this.openUrl({
        path: "/index/particulars",
        query: {
          id: id,
          type: "watch"
        }
      });
    },
    CollectCurrentChange(e) {
      console.log(e);
      this.collectPageCZ.pageNo = e;
      this.collectPage.pageNo = e;
      // this.getUserCollection();
      this.getMoreData();
    },
    floor(a) {
      var fool = a.split(",");
      if (fool[0] == 1) return fool[1] + "层/" + fool[2] + "层";
      if (fool[0] == 2)
        return fool[1] + "层-" + fool[2] + "层共" + fool[3] + "层";
      if (fool[0] == 3) return "共层" + fool[1] + "层";
    },
    shangjia() {
      let i = 0;
      this.collectList.forEach(e => {
        if (e.choose) {
          i++;
        }
      });
      if (i > 0) {
        this.zbc = true;
        this.shangjiaShow = true;
        // document.documentElement.style.overflow = "hidden";
      } else {
        this.$message({
          message: "请选择收藏信息！",
          type: "error",
          offset: 120,
          duration: 2000
        });
      }
    },
    //开启聊天
    chat(id) {
      this.$refs.chats.chatOpne(id);
    },
    quedingShangjia() {
      this.zbc = false;
      this.shangjiaShow = false;
      let delColl = [];
      this.collectList.forEach(e => {
        if (e.choose) {
          if (this.leibie == 2 || this.leibie == 3) {
            delColl.push(e.collectionAttention.id);
          } else if (this.leibie == 1) {
            delColl.push(e.id);
          } else if (this.leibie == 4) {
            delColl.push(e.followCollections && e.followCollections.id || e.id);
          }
        }
      });
      if (this.leibie == 2 || this.leibie == 3) {
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          { ids: String(delColl) }
        ).then(data => {
          this.$message({
            message: "取消收藏成功！",
            type: "success",
            offset: 120,
            duration: 2000
          });
          this.initCollect();
          this.close();
        });
        return;
      }
      if (this.leibie == 1) {
        this.$postHttp("/mob/user/delUserCollection", {
          cbType: this.vehicleTabData2,
          type: 1,
          userId: this.user.id,
          ids: String(delColl),
          delType: 2
        }).then(data => {
          if (data.code == 200) {
            this.$message({
              message: "取消收藏成功！",
              type: "success",
              offset: 120,
              duration: 2000
            });
            this.initCollect();
            this.close();
          }
        });
      }
      if (this.leibie == 4) {
        if (this.vehicleTabData2 == 3) {
          this.$postHttp(
            "/api/mobile/public/favoriteFollowOrCancelFavoriteFollow",
            {
              ids: String(delColl)
            }
          ).then(data => {
            if (data.code == 200) {
              this.$message({
                message: "取消收藏成功！",
                type: "success",
                offset: 120,
                duration: 2000
              });
              this.initCollect();
              this.close();
            }
          });
        } else {
          this.$postHttp(
            "/api/mobile/public/favoriteFollowOrCancelFavoriteFollow",
            {
              ids: String(delColl)
            }
          ).then(data => {
            if (data.code == 200) {
              this.$message({
                message: "取消收藏成功！",
                type: "success",
                offset: 120,
                duration: 2000
              });
              this.initCollect();
              this.close();
            }
          });
        }




      }

      console.log(String(delColl));
      document.documentElement.style.overflow = "";
    },
    guanShangjia() {
      this.zbc = false;
      this.shangjiaShow = false;
      this.collectList.forEach(item => {
        item.choose = false;
      });
      document.documentElement.style.overflow = "";
    },
    initCollect() {
      this.collectPage.pageNo = 1;
      this.collectPageCZ.pageNo = 1;
      this.collectList = [];

      // this.getUserCollection();
      this.getMoreData();
    },
    details(item) {
      if (this.leibie == 1) {
        //房源
        if (this.vehicleTabData2 == 1) {
          //房源
          if (item.delFlag == 1 || item.upStatus == 0 || item.status == 1) {
            this.myErrorMessage("该房源已不存在或已租售");
            return;
          }
          if (item.transactionType == 1) {
            this.openUrl({
              path: "/index/leaseDetails",
              query: {
                id: item.id
              }
            });
          } else {
            this.openUrl({
              path: "/index/newHouseDetails",
              query: {
                id: item.id
              }
            });
          }
        } else if (this.vehicleTabData2 == 2) {
          //店铺
          if (item.isDelUser == 0) {
            this.myErrorMessage("该店铺已不存在");
            return;
          }
          this.openUrl({
            path: "/index/ShopDetails",
            query: {
              id: item.id
            }
          });
        } else if (this.vehicleTabData2 == 3) {
          //用户
          this.openUrl({
            path: "/index/goldConsultant",
            query: {
              id: item.id
            }
          });
        } else if (this.vehicleTabData2 == 5) {
          //楼盘
          console.log("111111111111111111");
          if (item.isDelUser == 0) {
            this.myErrorMessage("该楼盘已不存在");
            return;
          }
          this.openUrl({
            path: "/index/storeyDetails",
            query: {
              id: item.id
            }
          });
        }
      } else if (this.leibie == 2) {
        //车源
        if (this.vehicleTabData2 == 1) {
          if (item.deleteFlag == 1 || item.shelfStatus == 0) {
            this.myErrorMessage("该车源已下架");
            return;
          }
          this.openUrl({
            path: "/index/newSourceDetails",
            query: {
              id: item.id
            }
          });
        } else if (this.vehicleTabData2 == 2) {
          if (item.deleteFlag == 1) {
            this.myErrorMessage("该店铺已注销");
            return;
          }
          if (item.storeType == 1 || item.storeType == 2) {
            this.openUrl({
              //店铺介绍
              path: "/index/newDealerDetails",
              query: {
                id: item.id
              }
            });
          } else {
            //门店介绍
            this.openUrl({
              path: "/index/ownerServiceDetails",
              query: {
                id: item.id
              }
            });
          }
        } else if (this.vehicleTabData2 == 3) {
          if (item.deleteFlag == 1 || item.shelfStatus == 0) {
            this.myErrorMessage("该服务已下架");
            return;
          }
          this.openUrl({
            path: "/index/serviceDetails",
            query: {
              id: item.id
            }
          });
        } else if (this.vehicleTabData2 == 4) {
          if (item.delFlag == 1) {
            this.myErrorMessage("该用户已注销");
            return;
          }
          this.openUrl({
            path: "/index/goldConsultant",
            query: {
              id: item.publisherId
            }
          });
        }
      } else if (this.leibie == 3) {
        //帮友圈
        if (item.deleteFlag == 1) {
          this.myErrorMessage("该帮友圈已删除");
          return;
        }
        this.openUrl({
          path: "/index/friendsCircle",
          query: {
            id: item.id
          }
        });
      }
    },
    toAgent(item) {
      if (item.businessType == 1) {
        //房源
        this.openUrl({
          path: "/index/goldConsultant",
          query: {
            id: item.user_id || item.userId || item.id
          }
        });
      } else if (item.businessType == 2) {
        //车源
        this.openUrl({
          path: "/index/goldConsultant",
          query: {
            id: item.publisherId || item.id
          }
        });
      }
    },
    shopdetails(item) {
      if (this.leibie == 1) {
        //房
        this.goHouseShopDetails(item);
      } else if (this.leibie == 2) {
        //车
        this.goVehicleShopDetails(item);
      }
    },
    leibieClick(num) {
      this.leibie = num;
      // 自适应调整 和 不要重复调接口
      let tempStr = this.activeName
      this.activeName = ''
      this.adjust = true
      setTimeout(() => {
        this.activeName = 'first'
        setTimeout(() => {
          this.adjust = false
        }, 16)
      }, 16)
      if (num == 5) {
        this.friendsCircle();
        return;
      }
      this.collectPage.pageSize = 3;
      if (num == 3) {
        this.collectPage.pageSize = 6;
      }
      this.collectPage.cbType = num;
      this.collectPage.pageNo = 1;
      this.collectPageCZ.pageNo = 1;
      this.vehicleTabClick(num, 1);
      // this.getUserCollection();
      // 全选取消
      this.select = false;
    },
    binaji() {
      this.checkboxShow = !this.checkboxShow;
    },
    close() {
      this.collectList.forEach(e => {
        e.choose = !e.choose;
      });
      this.checkboxShow = false;
      this.select = false;
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}

.cheClass {
  position: relative;

  &.my {
    .shangb {
      left: 40px;
    }
  }

  .shangb {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 104px;
    height: 85px;
  }

  .img {
    width: 230px;
    height: 154px;
  }
}

.zbc {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9;

  .shouye {
    position: absolute;
    width: 430px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    overflow: hidden;

    .name {
      margin-top: 40px;
      margin-left: 28px;
      font-size: 20px;

      p {
        display: inline-block;
        vertical-align: top;
      }
    }

    .tian {
      margin-top: 20px;
      margin-left: 28px;

      p {
        display: inline-block;
        vertical-align: middle;
        font-size: 20px;
      }

      .div {
        display: inline-block;
        width: 110px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #64b6a8;
        border-radius: 37px;
        overflow: hidden;
        vertical-align: middle;

        /deep/.el-input__inner {
          border: 0;
          font-size: 20px;
          color: #64b6a8;
          padding: 0 20px;
        }
      }
    }

    .p1 {
      width: 376px;
      font-size: 18px;
      color: #ea4b4b;
      margin-left: 28px;
      margin-top: 25px;
    }

    .quxiao {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 216px;
      height: 65px;
      line-height: 65px;
      background: #f2f2f2;
      color: #333;
      font-size: 21px;
      text-align: center;
      cursor: pointer;
    }

    .queding {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 216px;
      height: 65px;
      line-height: 65px;
      background: #64b6a8;
      color: #fff;
      font-size: 21px;
      text-align: center;
      cursor: pointer;
    }
  }

  .shangjia {
    position: absolute;
    width: 430px;
    height: 216px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    color: #333;
    border-radius: 10px;
    overflow: hidden;

    p {
      font-size: 24px;
      width: 100%;
      margin-top: 58px;
      text-align: center;
    }

    div {
      position: absolute;
      bottom: 40px;
      width: 115px;
      height: 42px;
      box-sizing: border-box;
      border-radius: 22px;
      font-size: 21px;
      text-align: center;
      line-height: 42px;
      cursor: pointer;
    }

    .d1 {
      color: #64b6a8;
      left: 85px;
      border: 1px solid #64b6a8;
    }

    .d2 {
      background-color: #64b6a8;
      color: #fff;
      right: 85px;
    }
  }
}

.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;
  border: 1px solid #e0e0e0;

  .leibie {
    height: 80px;
    border-bottom: 1px solid #e0e0e0;
    padding-left: 32px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .anniu {
      div {
        display: inline-block;
        margin-right: 54px;
        font-size: 20px;
        cursor: pointer;
      }

      .xuan {
        transform: scale(1.2);
        color: #64b6a8;
      }
    }

    .anniu_right {
      display: flex;
      align-items: center;

      .guanli {
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        margin-right: 20px;
        cursor: pointer;
      }

      .qxsc {
        cursor: pointer;
        width: 97px;
        height: 34px;
        background-color: #ffffff;
        border-radius: 22px;
        border: 1px solid #64b6a8;
        font-size: 18px;
        font-weight: 400;
        color: #64b6a8;
        text-align: center;
        line-height: 34px;
      }
    }
  }

  .vehicleTab {
    height: 110px;
    display: flex;
    align-items: center;
    margin-left: 40px;

    .vehicleTabClass {
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .vehicleTab_active {
      font-size: 26px;
      font-weight: 600;
      color: #64b6a8;
    }
  }

  .cheClass {
    margin-left: 32px;
    margin-top: 32px;
    margin-bottom: 20px;

    .li_right {
      display: flex;
      justify-content: space-between;

      .nameList {
        width: 460px;
        display: flex;
        flex-direction: column;
        padding-left: 14px;
        justify-content: space-between;
        cursor: pointer;

        .t_1 {
          font-size: 22px;
          padding-bottom: 12px;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }

        .t_4 {
          font-size: 18px;
          color: #666666;

          .t_4_img {
            width: 31px;
            height: 31px;
          }

          div {
            display: inline-block;
            //width: 90px;
            padding: 0px 5px;
            height: 30px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 30px;
            margin-left: 24px;
            color: #64b6a8;
          }
        }
      }

      .storeList {
        width: 460px;
        padding-left: 14px;
        display: flex;
        flex-direction: column;

        .t_1 {
          font-size: 22px;
          padding-bottom: 32px;
        }

        .t_2 {
          font-size: 18px;
          color: #666666;
          margin-top: 12px;
        }
      }

      .li_right_price {
        font-size: 26px;
        font-weight: 600;
        color: #e00000;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .bangyq {
    display: flex;
    align-items: center;

    .bangyqChage {
      width: 60px;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;

      .weixz {
        width: 34px;
        height: 34px;
        border-radius: 34px;
        cursor: pointer;
        border: #bbbbbb 1px solid;
      }
    }
  }

  .helpFriends {
    width: 810px;
    margin-top: 50px;
    padding-left: 40px;

    .helpFriends_title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .helpFriends_title_left {
        display: flex;
        align-items: center;

        .helpFriends_title_left_img {
          width: 76px;
          height: 76px;
          border-radius: 50%;
          overflow: hidden;
        }

        .helpFriends_title_left_span {
          font-size: 18px;
          font-weight: 500;
          color: #999999;
          margin-left: 40px;
        }
      }

      .helpFriends_title_right {
        display: flex;
        justify-content: space-between;
        cursor: pointer;
      }
    }

    .helpFriends_article {
      margin-top: 34px;

      .helpFriends_article_text {
        font-size: 18px;
        font-weight: 500;
        color: #999;
        line-height: 30px;
      }

      .helpFriends_article_active {
        font-size: 18px;
        font-weight: 500;
        color: #999;
        line-height: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
      }

      .unfold {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 20px;
        font-weight: 400;
        color: #64b6a8;

        span {
          cursor: pointer;
        }

        .unfold_img {
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
      }

      .unfold_yc {
        display: none;
      }
    }

    .img_one {
      width: 100%;
      height: 290px;
      margin-top: 30px;

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
    }

    .img_two {
      width: 100%;
      height: 290px;
      display: flex;
      justify-content: space-between;
      margin-top: 30px;

      img {
        object-fit: cover;
        width: 48%;
        height: 100%;
        border-radius: 8px;
      }
    }

    .img_three {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 30px;

      img {
        object-fit: cover;
        width: 30%;
        height: 100%;
        border-radius: 8px;
        margin-bottom: 20px;
      }
    }

    .video {
      width: 100%;
      height: 290px;
      margin-top: 30px;

      video {
        width: 100%;
        height: 100%;
        border-radius: 8px;
      }
    }

    .byq_bottom {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      align-items: center;

      .byq_bottom_right {
        display: flex;
        align-items: center;

        .byq_bottom_right_item {
          display: flex;
          align-items: center;
          font-size: 26px;
          font-weight: 400;
          color: #333333;
          margin-right: 35px;

          .byq_bottom_right_item_img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
          }
        }
      }
    }
  }

  .list {
    margin-top: 33px;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;

    .li {
      position: relative;
      margin-bottom: 32px;
      cursor: pointer;

      .shangb {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 104px;
        height: 85px;
      }

      .img {
        width: 230px;
        height: 154px;
      }

      .wenzi {
        display: inline-block;
        vertical-align: top;
        width: 350px;
        height: 154px;
        margin-left: 14px;

        .p1 {
          font-size: 20px;
          color: #333333;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .p2 {
          font-size: 14px;
          color: #666666;
          margin-top: 8px;
          margin-bottom: 8px;
        }

        .p3 {
          font-size: 14px;
          color: #666666;
        }

        .p4 {
          position: absolute;
          bottom: 0;

          img {
            width: 30px;
            height: 30px;
            cursor: pointer;
            border-radius: 30px;
          }

          span {
            font-size: 14px;
            vertical-align: middle;
          }

          .gong {
            display: inline-block;
            /* width: 68px; */
            height: 23px;
            background: #ffffff;
            border: 1px solid #64b6a8;
            border-radius: 4px;
            text-align: center;
            line-height: 23px;
            color: #64b6a8;
            margin-left: 10px;
            cursor: pointer;
            padding: 0 5px;
          }
        }

        .p5 {
          position: absolute;
          bottom: 0;
          color: #666666;
        }

        .p6 {
          position: absolute;
          bottom: 0;

          span {
            font-size: 14px;
            display: block;
            margin-top: 10px;
          }
        }
      }

      .jiage {
        position: absolute;
        width: 140px;
        top: 45px;
        right: 24px;

        p {
          text-align: center;
        }

        .p1 {
          font-size: 26px;
          color: red;
        }

        .p2 {
          font-size: 12px;
          color: #333;
          margin-top: 10px;
        }
      }

      .el-checkbox {
        vertical-align: middle;
        margin-right: 20px;
      }

      /deep/.el-checkbox__inner {
        width: 34px;
        height: 34px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 8px;
        height: 18px;
        left: 11px;
        top: 4px;
        border-left: 0;
        border-top: 0;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #64b6a8;
        border-color: #64b6a8;
      }
    }
  }

  .list1 {
    margin-top: 32px;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;

    .li {
      display: inline-block;
      box-sizing: border-box;
      width: 260px;
      height: 340px;
      // border: 1px solid #d0d0d0;
      margin-bottom: 15px;
      margin-right: 15px;

      .identity {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;

        .jjr {
          margin-left: 16px;
          width: 56px;
          height: 22px;
          border-radius: 14px;
          border: 1px solid #64b6a8;
          font-size: 12px;
          font-weight: 400;
          color: #64b6a8;
          text-align: center;
          line-height: 22px;
        }
      }

      .touxiang {
        cursor: pointer;
        width: 144px;
        height: 180px;
        margin-top: 14px;
        margin-left: 58px;
      }

      .name {
        width: 100%;
        text-align: center;
        font-size: 17px;
        color: #333333;
        margin-top: 11px;
      }

      .pingfen {
        margin-top: 15px;

        div {
          display: inline-block;
          vertical-align: middle;
          font-size: 13px;
          margin-left: 33px;
          margin-right: 15px;
        }

        img {
          vertical-align: middle;
          width: 26px;
          height: 26px;
          margin-right: 3px;
        }
      }

      .weigui {
        margin-top: 19px;

        .wei {
          display: inline-block;
          vertical-align: middle;
          font-size: 13px;
          margin-left: 33px;
          cursor: pointer;

          span {
            vertical-align: middle;
            margin-right: 10px;
          }
        }

        img {
          vertical-align: middle;
          width: 25px;
          height: 25px;
          margin-right: 6px;
          cursor: pointer;
        }
      }
    }

    .lixuan {
      opacity: 0.4;
    }
  }

  .fenye {
    width: 100%;
    height: 50px;
    text-align: center;
    margin-bottom: 50px;
    margin-top: 24px;
  }

  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }

  .caozuo {
    position: relative;
    width: 100%;
    height: 90px;
    border-top: 1px solid #e0e0e0;

    label {
      border: 2px solid #e0e0e0;
      padding: 4px 8px;
      border-radius: 4px;
    }

    .shan {
      position: absolute;
      font-size: 20px;
      color: #333;
      top: 30px;
      left: 75px;
      cursor: pointer;
    }

    .anniu {
      position: absolute;
      right: 24px;
      top: 24px;
      width: 120px;
      height: 42px;
      line-height: 42px;
      font-size: 19px;
      cursor: pointer;
      color: #fff;
      background-color: #64b6a8;
      border-radius: 21px;
      text-align: center;
    }

    .el-checkbox {
      position: absolute;
      top: 25px;
      left: 30px;
    }

    /deep/.el-checkbox__inner {
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }

    /deep/.el-checkbox__inner::after {
      border: 2px solid #fff;
      width: 8px;
      height: 18px;
      left: 11px;
      top: 4px;
      border-left: 0;
      border-top: 0;
    }

    /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
    /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #64b6a8;
      border-color: #64b6a8;
    }
  }
}

.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;

  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;

    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }

    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }

    .list {
      position: relative;
      width: 100%;

      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }

      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }

    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;

  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        width: 60px;
        height: 60px;
      }

      span {
        vertical-align: middle;
      }
    }

    .rig {
      position: absolute;
      right: 0;

      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}

// 楼盘
.list.ll {
  width: 100%;

  .li {
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;

    .biao {
      width: 300px;
      height: 200px;
    }

    .shangb {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 104px;
      height: 85px;
    }

    .name {
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
      position: relative;
      height: 200px;

      .t_1 {
        font-size: 26px;
        cursor: pointer;
      }

      .t_2 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_3 {
        font-size: 18px;
        color: #666666;
        margin-top: 12px;
      }

      .t_4 {
        cursor: pointer;
        position: absolute;
        font-size: 18px;
        color: #666666;
        bottom: 0;
        left: 0;

        img {
          width: 31px;
          height: 31px;
        }

        div {
          display: inline-block;
          // width: 90px;
          height: 30px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 30px;
          // margin-left: 24px;
          color: #64b6a8;
        }
      }
    }

    .qian {
      position: absolute;
      top: 80px;
      right: 0;

      .p1 {
        width: 230px;

        span {
          display: inline-block;
          vertical-align: baseline;
          font-size: 24px;
        }
      }
    }
  }
}

// 店铺
.list.ll2 {
  margin-top: 33px;

  .li {
    position: relative;
    margin-bottom: 32px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 32px;

    .img {
      width: 300px;
      height: 200px;
    }

    .fwxm {
      display: inline-block;
      vertical-align: top;
      margin-left: 24px;
      position: relative;
      height: 200px;
      width: 700px;

      .t_1 {
        font-size: 24px;
        cursor: pointer;
        font-weight: 600;
        color: #64b6a8;
      }

      .t_2 {
        font-size: 16px;
        color: #666666;
        margin-top: 12px;
      }
    }

    .wenzi {
      display: inline-block;
      vertical-align: top;
      width: 350px;
      height: 154px;
      margin-left: 14px;

      .p1 {
        font-size: 20px;
        color: #333333;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .p2 {
        font-size: 14px;
        color: #666666;
        margin-top: 8px;
        margin-bottom: 8px;
      }

      .p3 {
        font-size: 14px;
        color: #666666;
      }

      .p4 {
        position: absolute;
        bottom: 0;

        img {
          width: 30px;
          height: 30px;
          cursor: pointer;
        }

        span {
          font-size: 14px;
          vertical-align: middle;
        }

        .gong {
          display: inline-block;
          width: 68px;
          height: 23px;
          background: #ffffff;
          border: 1px solid #64b6a8;
          border-radius: 4px;
          text-align: center;
          line-height: 23px;
          color: #64b6a8;
          margin-left: 10px;
          cursor: pointer;
        }
      }

      .p5 {
        position: absolute;
        bottom: 32px;
        color: #666666;
      }

      .p6 {
        position: absolute;
        bottom: 0;

        span {
          font-size: 14px;
          display: block;
          margin-top: 10px;
        }
      }
    }

    .but {
      position: absolute;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      //width: 151px;
      top: 34px;
      right: 0px;

      .but1 {
        cursor: pointer;
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        padding: 16px 18px 16px 67px;
        height: 54px;
        background: rgba(100, 182, 168, 0.08);
        border: 1px solid #64b6a8;
        border-radius: 6px;
        font-size: 16px;
        color: #64b6a8;
        margin-bottom: 17px;

        img {
          position: absolute;
          width: 40px;
          height: 40px;
          top: 7px;
          left: 19px;
        }
      }

      .but2 {
        cursor: pointer;
        width: 151px;
        position: relative;
        box-sizing: border-box;
        display: inline-block;
        align-items: center;
        padding: 16px 18px 16px 67px;
        height: 54px;
        background: #64b6a8;
        border-radius: 6px;
        font-size: 16px;
        color: #fff;

        img {
          position: absolute;
          width: 40px;
          height: 40px;
          top: 7px;
          left: 19px;
        }
      }
    }

    .jiage {
      position: absolute;
      width: 110px;
      top: 45px;
      right: 24px;

      p {
        text-align: center;
      }

      .p1 {
        font-size: 26px;
        color: red;
      }

      .p2 {
        font-size: 12px;
        color: #333;
        margin-top: 10px;
      }
    }

    .el-checkbox {
      vertical-align: middle;
      margin-right: 20px;
    }

    /deep/.el-checkbox__inner {
      width: 34px;
      height: 34px;
      border-radius: 50%;
    }

    /deep/.el-checkbox__inner::after {
      border: 2px solid #fff;
      width: 8px;
      height: 18px;
      left: 11px;
      top: 4px;
      border-left: 0;
      border-top: 0;
    }

    /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
    /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #64b6a8;
      border-color: #64b6a8;
    }
  }
}
</style>
